<template>
	<view class="">
		<view class="voucher_center_box">
			<view class="voucher_center_box_select">
				请选择充值的金额
			</view>
			<view class="voucher_center_box_facevalue">
				<view @click="pickItem(item)" :class="[item.isChecked&&'voucher_center_box_facevalue_item_extra']" class="voucher_center_box_facevalue_item" v-for="(item,index) in list" :key="index">
					<text class="voucher_center_box_facevalue_item_money">{{Number(item.money)}}元</text>
					<text v-if="item.voucherValue!=0" class="voucher_center_box_facevalue_item_present">+送{{item.voucherValue}}元抵扣券</text>
				</view>
			</view>
			<view class="voucher_center_box_explain" @click="skipRecharge">
				<image src="/static/my/doubt.png" mode=""></image>
				<text>充值政策说明</text>
			</view>
		</view>
		<view class="voucher_center_buycc" :style="isIphone?'padding-bottom:68rpx':''" @click="openDialog">
			<view class="voucher_center_btn">确定</view>
		</view>
		<view class="discount" @touchmove.stop.prevent="" :class="show?'':'discount_dh'">
			<view class="voucher_box" :style="isIphone?'padding-bottom:68rpx':''">
				<view class="voucher_box_top">
					<text>支付</text>
				</view>
				<view class="voucher_box_money">
					<text class="voucher_box_money_newc">￥</text><text class="voucher_box_money_text">{{selectMoney}}</text>
				</view>
				<scroll-view scroll-y="true" style="max-height: 50vh;">
					<view class="voucher_box_list">
						<view class="voucher_box_list_item" v-for="(item,index) in voucherList" :key="index">
							<!-- <view class="voucher_box_list_item_left">
								111
							</view>
							<radio @tap="pritEvnet(item)" color="#077840" :checked="item.isChecked"/> -->
							<view class="voucher_box_list_item_top">
								<view class="voucher_box_list_item_top_left voucher_box_list_item_top_thirdly">
									<view class="voucher_box_list_item_top_left_money">
										<text class="voucher_box_list_item_top_left_money_sign">￥</text>
										<text class="voucher_box_list_item_top_left_money_amount">{{Number(item.money)}}</text>
									</view>
									<text class="voucher_box_list_item_top_left_fullmoney">满{{item.limit}}元</text>
								</view>
								<view class="voucher_box_list_item_top_right">
									<view class="voucher_box_list_item_top_right_information">
										<view class="voucher_box_list_item_top_right_information_effect">
											<text class="voucher_box_list_item_top_right_information_effect_left">{{item.title}}</text>
										</view>
										<text class="voucher_box_list_item_top_right_information_time">有效期至 {{item.expire_format}}</text>
									</view>
								</view>
								<view class="voucher_box_list_item_top_radio">
									<radio @tap="pritEvnet(item)" color="#077840" :checked="item.isChecked"/>
								</view>
							</view>
							<view class="voucher_box_list_item_bottom">
								<view class="voucher_box_list_item_bottom_condition">
									<text class="voucher_box_list_item_bottom_condition_text" :class="[item.isImage&&'voucher_box_list_item_bottom_condition_extext']">
										{{item.rule}}
									</text>
								</view>
								<image class="voucher_box_list_item_bottom_image" :class="[item.isImage&&'voucher_box_list_item_bottom_eximage']" @click="switchover(item)" src="/static/my/pulldown.png" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="voucher_box_btn">
					<button type="default" @click="buyCenter">确认支付</button>
				</view>
			</view>
		</view>
		<view class="tui-actionsheet-mask" @touchmove.stop.prevent="" :class="[show?'':'tui-mask-show']" @tap="handleClickMask"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				id:null,
				recharge:null,
				coupon_id:0,
				show:true,
				voucherList:[],//抵扣券列表
				isIphone: false,
				selectMoney:0,
				originV:0
			}
		},
		onLoad() {
			this.getInfo()
			let that=this;
			//#ifdef MP-WEIXIN
			wx.getSystemInfo({
				success: res => {
					let modelmes = res.model;
					console.log(modelmes, 66666666666666666)
					let iPhoneArr = ['iPhone X', 'iPhone 11', 'iPhone Pro Max', 'iPhone Pro', 'iPhone 12']
					iPhoneArr.forEach(function(item) {
						if (modelmes.search(item) != -1) {
							that.isIphone = true
						}
					})
				}
			})
			//#endif
		},
		methods: {
			getInfo(){
				this.api.couponIndex({
					type:3
				})
				.then(res=>{ 
					this.id=res.info.id
					if(res.info.recharge_money){
						
						let c=res.info.recharge_money.split(',')
						this.list=c.map(item=>{
							let begin={
								money:Number(item),
								voucherValue:0,
								isChecked:false
							}
							if(Number(res.info.recharge_limit_money)<=Number(item)){
								begin.voucherValue=Number(item)
							}
							return begin
						})
					}
				})
			},
			pickItem(item){
				if(!item.isChecked){
					this.list.forEach(itemv=>{
						itemv.isChecked=false
					})
					this.recharge=item.money
					this.selectMoney=item.money
					this.originV=item.money
					item.isChecked=true
				}
				// item.isChecked=true
				// this.recharge=item
			},
			// 打开弹窗
			openDialog(){
				if(!this.recharge){
					this.tui.toast('请选择充值金额')
					return
				}
				this.selectMoney=this.recharge
				this.coupon_id=0
				this.api.couponRechargeCoupon({
					money:this.recharge
				})
				.then(res=>{
					if(res.coupon_list.length==0){
						this.buyCenter()
						return
					}
					this.voucherList=res.coupon_list.map(item=>{
						item.isChecked=false
						item.isImage=false
						return item
					})
					this.show=false
				})
			},
			// 遮罩层弹框
			handleClickMask() {
				this.show = true
			},
			// 选择抵扣券
			pritEvnet(item){
				if(!item.isChecked){
					this.voucherList.forEach(itema=>{
						itema.isChecked=false
					})
					item.isChecked=true
					this.selectMoney=Math.round((Number(this.originV)-Number(item.money))*1000)/1000
					this.coupon_id=item.id
					return
				}
				this.coupon_id=0
				this.selectMoney=this.originV
				item.isChecked=false
			},
			// 切换
			switchover(item){
				item.isImage=!item.isImage
			},
			buyCenter(){
				let _this=this;
				if(!this.recharge){
					this.tui.toast('请选择充值金额')
					return
				}
				this.api.couponGetCoupon3({
					id:this.id,
					recharge:this.recharge,
					coupon_id:this.coupon_id
				})
				.then(resa=>{
					this.api.newPay({
						out_trade_no: resa.out_trade_no
					})
					.then(resb=>{
						this.api.payment({
							out_trade_no: resb.pay_data.out_trade_no
						})
						.then(resc => {
							this.json = resc.data.json
							let param = JSON.parse(resc.data.json)
							// 微信这边回调有延迟
							uni.requestPayment({
								timeStamp: param.timeStamp, //记住，这边的timeStamp一定要是字符串类型的，不然会报错
								nonceStr: param.nonceStr,
								package: param.package,
								signType: 'MD5',
								paySign: param.paySign,
								appId: param.appId,
								success: function(event) {
									wx.showToast({
										title: '充值成功',
										icon: 'success',
										duration: 1500
									});
									_this.show=true
									uni.$emit('anewFlush')
								},
								fail: function(error) {
									_this.show=true
									_this.tui.toast('充值失败')
								},
								complete: function() {}
							});
						})
					})
				})
			},
			skipRecharge(){
				uni.navigateTo({
					url:'/userpage/userinfo/walletDetail/topUpPolicy'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.voucher_center_box{
		padding: 60rpx 30rpx 0;
		&_select{
			// margin-top: 60rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
		}
		&_facevalue{
			margin: 40rpx 0 16rpx;
			display: flex;
			flex-wrap: wrap;
			margin-left: -24rpx;
			&_item{
				width: 214rpx;
				height: 172rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #FF6F2C;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 24rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				&_money{
					padding: 0 20rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
					text-align: center;
				}
				&_present{
					margin-top: 20rpx;
					padding:0 10rpx;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 32rpx;
					text-align: center;
				}
			}
			&_item_extra{
				background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
				border: none;
				text{
					color: #FFFFFF;
				}
			}
		}
		&_explain{
			display: flex;
			align-items: center;
			image{
				width: 32rpx;
				height: 32rpx;
				vertical-align: top;
				margin-right: 16rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}
	}
	.voucher_center_buycc{
		position: fixed;
		bottom: 0;
		height: 136rpx;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 12;
		.voucher_center_btn{
			height: 96rpx;
			background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
			border-radius: 8px;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin:0 60rpx;
		}
	}
	/* 弹出框 */
	.discount{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 60rpx 0 40rpx;
		/* height: 299rpx; */
		z-index: 888;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		visibility: hidden;
	}
	.discount_dh{
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	.tui-actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 886;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
	// dialog
	.voucher_box{
		&_top{
			text-align: center;
			line-height: 50rpx;
			height: 50rpx;
			text{
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		&_money{
			text-align: center;
			line-height: 82rpx;
			height: 82rpx;
			margin-top: 24rpx;
			&_text{
				font-size: 58rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			&_newc{
				font-size: 38rpx;
			}
		}
		&_list{
			padding: 40rpx 30rpx;
			// max-height: 40vh;
			margin-top: -24rpx;
			&_item{
				padding: 0 20rpx;
				margin-top: 24rpx;
				box-shadow: 0px 0px 12px 0px rgba(91, 74, 40, 0.1);
				border-radius: 8rpx;
				&_top{
					padding: 24rpx 0;
					display: flex;
					&_left{
						width: 188rpx;
						height: 152rpx;
						background: linear-gradient(90deg, #0DA057 0%, #077840 100%);
						border-radius: 12rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
						&_money{
							display: flex;
							align-items: center;
							&_sign{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 34rpx;
								margin-top: 30rpx;
							}
							&_amount{
								font-size: 60rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								line-height: 84rpx;
							}
						}
						&_fullmoney{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 34rpx;
						}
					}
					&_secondly{
						background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
					}
					&_thirdly{
						background: linear-gradient(90deg, #5BB6FB 0%, #2F80F6 100%);
					}
					&_right{
						display: flex;
						// justify-content: space-between;
						// align-items: center;
						flex: 1;
						height: 152rpx;
						&_information{
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							&_effect{
								display: flex;
								&_left{
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #333333;
									line-height: 40rpx;
									margin-right: 8rpx;
								}
								&_right{
									width: 98rpx;
									height: 32rpx;
									background: #FFFFFF;
									border-radius: 4rpx;
									border: 2rpx solid #FF5100;
									font-size: 20rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #FF5100;
									line-height: 28rpx;
									text-align: center;
									box-sizing: border-box;
								}
							}
							&_time{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 34rpx;
							}
							&_amount{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 34rpx;
							}
						}
						&_status{
							display: flex;
							align-items: center;
							&_text{
								border-radius: 26rpx;
								font-size: 22rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								padding: 8rpx 26rpx;
								background-color: #FF5100;
							}
							&_secondly{
								border: 2rpx solid #FF5100;
								color: #FF5100;
							}
							&_thirly{
								border: 2rpx solid #2F80F6;
								color: #2F80F6;
							}
						}
					}
					&_radio{
						display: flex;
						align-items: center;
					}
				}
				&_bottom{
					padding: 24rpx 0;
					border-top: 2rpx dashed #E5E5E5;
					display: flex;
					justify-content: space-between;
					&_condition{
						display: flex;
						flex-direction: column;
						width: calc( 100% - 50rpx );
						&_text{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-bottom: 20rpx;
							overflow: hidden; 
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						&_extext{
							overflow:inherit;
							text-overflow: inherit;
							white-space: inherit;
						}
					}
					&_image{
						width: 24rpx;
						height: 14rpx;
						vertical-align: top;
						margin-top: 10rpx;
						margin-left: 24rpx;
						transform: rotate(0);
						// transition: 0.3s ease-in-out;
					}
					&_eximage{
						transform: rotate(-180deg);
					}
				}
			}
		}
		&_btn{
			width: 690rpx;
			height: 96rpx;
			border-radius: 8rpx;
			margin: 0 auto;
			button{
				background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				height: 96rpx;
				line-height: 96rpx;
			}
		}
	}
</style>
